import React, { useEffect, useState } from 'react'
import '../static/less/category.less'
import { categoryAll, categoryList } from '../api/index'
import { Link } from 'react-router-dom'

export default function Category() {
  //定义
  let [category, setCategory] = useState([]);
  let [category1, setCategory1] = useState([]);
  let [category2, setCategory2] = useState([]);
  let [category3, setCategory3] = useState([]);
  let [List, setList] = useState([]);
  let [index, setIndex] = useState(1)
  let [index1, setIndex1] = useState(0)
  let [index2, setIndex2] = useState(0)
  let [index3, setIndex3] = useState(0)

  categoryAll().then(
    content => {
      let { code, data } = content;
      if (code == 200) {
        setCategory(data.category)
        setCategory1(data.end)
        setCategory2(data.free)
        setCategory3(data.sort)
      }
      // console.log(category);
    }
  )

  const CategoryListFn = async () => {
    // console.log(index,index1,index2,index3);
    await categoryList({
      cateid: index,
      end: index1,
      free: index2,
      sort: index3,
      p: 1,
      n: 21
    }).then(
      content => {
        let { code, data } = content;
        // console.log(data);
        if (code == 200) {
          setList(data)
        }
      }
    )
  }

  // 初始化 
  useEffect(() => {
    CategoryListFn();
  }, [index, index1, index2, index3])

  return (
    <div className='category'>
      <div className='top'>
        <div className='back' onClick={
          () => {
            window.history.back();
          }
        }></div>
        <h2 className='top-title'>分类</h2>
      </div>
      <div className='middle'>
        <ul>
          {
            category.map((item, i) => {
              return (
                <li
                  key={i}
                  className={item.id == index ? 'active' : ''}
                  onClick={() => {
                    setIndex(item.id)
                    // CategoryListFn();          
                    // console.log(index,item.id,item.title);
                  }}
                >
                  {item.title}
                </li>
              )
            })
          }
        </ul>
        <ul>
          {
            category1.map((item, i) => {
              return (
                <li
                  key={i}
                  className={item.id == index1 ? 'active' : ''}
                  onClick={() => {
                    setIndex1(item.id);
                    // CategoryListFn();
                    // console.log(index,item.id,item.title);
                  }}
                >
                  {item.title}
                </li>
              )
            })
          }
        </ul>
        <ul>
          {
            category2.map((item, i) => {
              return (
                <li
                  key={i}
                  className={item.id == index2 ? 'active' : ''}
                  onClick={() => {
                    setIndex2(item.id);
                    // CategoryListFn();
                    // console.log(index,item.id,item.title);
                  }}
                >
                  {item.title}
                </li>
              )
            })
          }
        </ul>
        <ul>
          {
            category3.map((item, i) => {
              return (
                <li
                  key={i}
                  className={item.id == index3 ? 'active' : ''}
                  onClick={() => {
                    setIndex3(item.id);
                    // CategoryListFn();
                    // console.log(index,item.id,item.title);
                  }}
                >
                  {item.title}
                </li>
              )
            })
          }
        </ul>
      </div>
      <div className='bottom'>
        {
          List.map((item, i) => {
            return (
              <div className='box' key={i}>
                <Link to={`/detail?id=${item.id}`}>
                  <img className='box-img' src={item.pic} alt="" />
                  <div className='box-title'>{item.title}</div>
                  <div className='box-text'>{item.info}</div>
                </Link>
              </div>
            )
          })
        }
      </div>
    </div>
  )
}
